const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css样式
let OptimizeCss = require('optimize-css-assets-webpack-plugin');//css压缩插件
let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //js压缩插件
let CleanWebpackPlugin = require('clean-webpack-plugin');// 每次打包，使build文件夹先被清空，在生成
let webpack = require('webpack');
module.exports = {
    mode:'development',
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    devServer:{ //开发服务器的配置
        hot: true, //开启热更新
        port: 3666,
        progress: true, 
        contentBase:"./dist" 
    },
    watch: true, // 开启监听，时时打包
    watchOptions:{ //监控的选项
        poll:1000, //每秒询问1000次，是不是有新内容要打包
        aggregateTimeout: 500, //单位是毫秒 防抖 一直输入代码的情况下不打包
        ignored: /node_modules/  //不需要进行监控
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            hash: true, //增加hash值
            minify:{
                removeAttributeQuotes: true, //删除html元素属性的双引号
                collapseWhitespace: true, //去除空格，变为一行显示
                
            }
        }),
        new webpack.BannerPlugin("版权声明内容"),  //webpack 自带插件  插入版权声明内容
         new webpack.NamedModulesPlugin(),//打印热更新的模块路径
         new webpack.HotModuleReplacementPlugin() // 热更新插件
    ],
    module:{
        rules:[
            {
                test:/\.html$/,
                use:'html-withimg-loader'
            },
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env'
                        ],
                        plugins:[
                            ['@babel/plugin-proposal-class-properties'], // 转换class等es7语法
                            ['@babel/plugin-syntax-dynamic-import']
                        ]
                    }
                },
                include:path.resolve(__dirname,'src'),//只找src目录里的js
                exclude: /node_modules/  //排除该目录
            },
            {test:/\.css$/, use:[
                    {
                        loader: 'style-loader', //把css插入到head标签中
                        options:{
                            insertAt:'top' //插入的位置，默认是放在head的最底下，改为top后就放上面了，可以写自己的样式
                        }
                    },
                    MiniCssExtractPlugin.loader, //理由插件将css抽离成单独的文件
                    'css-loader', //解析 类似@import语法
                    'postcss-loader',//自动添加样式前缀，需要增加一个postcss.config配置文件
                ]},
        ]
    }
}